<template>
	<!-- 我的话题 -->
	<view>
		<swiper-item v-if="hasLogin">
			<u-tabs :list="myTopicTabList"  :current="currentTab" @click="myTopicTabsClick"
					style="padding: 10px 0 5px;background-color: #FFFFFF;" lineColor="#FFFFFF"
			        :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }"
			        :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }"
			        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
			    >
			</u-tabs>

			<topic-list ref="mList0" v-show="currentTab === 0" typeId="1" :height="height - tabsHeight"></topic-list>
			<topic-list ref="mList1" v-show="currentTab === 1" typeId="2" :height="height - tabsHeight"></topic-list>
			<topic-list ref="mList2" v-show="currentTab === 2" typeId="3" :height="height - tabsHeight"></topic-list>
		</swiper-item>

		<no-login v-if="!hasLogin" show-text="登录后才能查看到哦~" :height="height" :iconMarginTop="100" icon="/static/bg/cat_dy.png"></no-login>

	</view>
</template>

<script>
	import TopicList from "@/pages/topic/cpns/myTopicList.vue"
	import NoLogin from "@/components/noTips/noLogin.vue"
	export default {
		components: {
			TopicList,
			NoLogin
		},
		props: {
			height: {
				type: Number,
				default () {
					return null
				}
			},
		},
		data() {
			return {
				hasLogin: false,
				isLoaded: false,
				tabsHeight: 34,
				// 我的话题菜单分类
				myTopicTabList: [{
						id: 1,
						name: '我加入的',
						selected: true
					},{
						id: 2,
						name: '我管理的',
						selected: false
					},{
						id: 3,
						name: '最近浏览',
						selected: false
					}
				],
				// 我的话题菜单索引
				currentTab: 0,
			}
		},
		created() {
			this.isLoaded = false
			this.hasLogin = this.$authUtil.isLoginedin()
		},
		onShow() {
			this.hasLogin = this.$authUtil.isLoginedin()
		},
		methods: {
			onShowMtd(){
				if (this.hasLogin){
					this.isLoaded = true
					this.$nextTick(()=>{
						this.$refs.mList0.getTopicList()
						this.$refs.mList1.getTopicList()
						this.$refs.mList2.getTopicList()
					})
				}
			},
			tabsChange(){
				if(!this.isLoaded && this.hasLogin){
					this.isLoaded = true
					this.$nextTick(()=>{
						this.$refs.mList0.getTopicList()
						this.$refs.mList1.getTopicList()
						this.$refs.mList2.getTopicList()
					})
				}
			},
			// tab选择
			myTopicTabsClick(e) {
				this.currentTab = e.index
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>
